<template>
  <div class="app">
    <h1>我是App组件</h1>
    <h2 ref="demo">当前求和为：{{n}}</h2>
    <button @click="n+=1">点我n+1</button>
    <button @click="showH2">点我输出h2中的内容</button>
    <button @click="show">试一试ref用在组件标签上获取的是什么</button>
    <hr>
    <Person ref="p"/>
  </div>
</template>

<script>
  import Person from './components/Person'

  export default {
    name:'App',
    data() {
      return {
        n:1
      }
    },
    components:{Person},
    methods: {
      showH2(){
        console.log(this.$refs.demo.innerText)
      },
      show(){
        console.log('@',this.$refs.p)
      }
    },
  }
</script>

<style>
  .app {
    background-color: gray;
    padding: 20px;
  }
</style>